<template>
  <el-form label-position="top" style="margin-top: 20px">
    <el-form-item label="五、项目研究人员组织" />
    <el-form-item label="课题负责人" />
    <vxe-table
      border
      show-overflow
      :data="leader"
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      <vxe-column
        field="memberId"
        title="姓名"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <!-- <template #default="{ row }">{{ row.name }}</template> -->
        <template #default="{ row }">
          <vxe-select v-model="row.memberId" transfer @change="leaderChange">
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.memberId" transfer @change="leaderChange">
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="sex" title="性别" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.sex" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="department" title="单位/部门" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.department" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="education" title="文化程度" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.education" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="technicalTitle" title="技术职称" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.technicalTitle" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="learnSpecialty" title="所学专业" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.learnSpecialty" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="workSpecialty" title="从事专业" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.workSpecialty" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="cardNo" title="身份证号" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.cardNo" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="email" title="邮箱" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.email" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
    <el-form-item label="项目主要研究成员" />
    <vxe-table
      border
      show-overflow
      :data="members"
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }"
    >
      <vxe-column
        field="memberId"
        title="姓名"
        :edit-render="{ autofocus: '.vxe-input--inner' }"
      >
        <!-- <template #default="{ row }">{{ row.name }}</template> -->
        <template #default="{ row }">
          <vxe-select v-model="row.memberId" transfer @change="memberChange">
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.memberId" transfer @change="memberChange">
            <vxe-option
              v-for="item in users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            />
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column field="sex" title="性别" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.sex" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="department" title="单位/部门" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.department" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="education" title="文化程度" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.education" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="technicalTitle" title="技术职称" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.technicalTitle" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="learnSpecialty" title="所学专业" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.learnSpecialty" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="workSpecialty" title="从事专业" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.workSpecialty" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="cardNo" title="身份证号" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.cardNo" placeholder="请输入" />
        </template>
      </vxe-column>
      <vxe-column field="email" title="邮箱" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.email" placeholder="请输入" />
        </template>
      </vxe-column>
    </vxe-table>
    <el-button
      style="margin-top: 20px"
      type="primary"
      :icon="Plus"
      @click="handleAdd"
    >
      增加成员
    </el-button>
  </el-form>
</template>

<script setup>
  import { Plus } from '@element-plus/icons-vue'
  import { getAllUser, getUser } from '@/api/system/user'

  const $baseMessage = inject('$baseMessage')

  const users = ref([])

  const leader = ref([
    {
      memberId: '',
      sex: '',
      department: '',
      education: '',
      technicalTitle: '',
      learnSpecialty: '',
      workSpecialty: '',
      cardNo: '',
      email: '',
      type: 1,
    },
  ])

  const members = ref([
    {
      memberId: '',
      sex: '',
      department: '',
      education: '',
      technicalTitle: '',
      learnSpecialty: '',
      workSpecialty: '',
      cardNo: '',
      email: '',
      type: 2,
    },
  ])

  const getUserList = () => {
    getAllUser().then((res) => {
      if (res.code == 0 || res.code == 200) {
        users.value = res.data || []
      }
    })
  }

  const leaderChange = (select) => {
    // getUser(select.value).then((res) => {
    //   if (res.code == 0 || res.code == 200) {
    //     const userInfo = res.data
    //     leader.value = [
    //       {
    //         userId: userInfo.id,
    //         name: userInfo.nickname,
    //         unitDepartment: `${userInfo.unitName || ''}/${userInfo.deptName || ''}`,
    //         age: '13',
    //         titlePosition: '职称/职务',
    //         specialty: '从事专业',
    //         phone: userInfo.mobile,
    //         type: 2,
    //       },
    //     ]
    //   }
    // })
  }

  const memberChange = (select, rowIndex) => {
    // getUser(select.value).then((res) => {
    //   if (res.code == 0 || res.code == 200) {
    //     const userInfo = res.data
    //     const membersData = [...members.value]
    //     membersData[rowIndex] = {
    //       userId: userInfo.id,
    //       name: userInfo.nickname,
    //       unitDepartment: `${userInfo.unitName || ''}/${userInfo.deptName || ''}`,
    //       age: '13',
    //       titlePosition: '职称/职务',
    //       specialty: '从事专业',
    //       phone: userInfo.mobile,
    //       type: 1,
    //     }
    //     members.value = membersData
    //   }
    // })
  }

  const handleAdd = () => {
    members.value.push({
      memberId: '',
      sex: '',
      department: '',
      education: '',
      technicalTitle: '',
      learnSpecialty: '',
      workSpecialty: '',
      cardNo: '',
      email: '',
      type: 2,
    })
  }

  const getFormData = () => {
    if (!leader.value[0].memberId) {
      $baseMessage('请填写完整的项目研究人员组织', 'error')
      return false
    }
    for (let i = 0; i < leader.value.length; i++) {
      if (!leader.value[i].memberId) {
        $baseMessage('请填写完整的项目研究人员组织', 'error')
        return false
      }
    }
    for (let i = 0; i < members.value.length; i++) {
      if (!members.value[i].memberId) {
        $baseMessage('请填写完整的项目研究人员组织', 'error')
        return false
      }
    }

    const formData = [...leader.value, ...members.value].map((item) => {
      return {
        ...item,
        memberName:
          users.value.find((key) => key.id == item.memberId)?.nickname || '',
      }
    })
    return { memberInfo: formData }
  }

  const setFormData = ({ memberInfo }) => {
    leader.value = memberInfo.filter((item) => item.type == 1)
    members.value = memberInfo.filter((item) => item.type == 2)
  }

  defineExpose({ getFormData, setFormData })

  getUserList()
</script>

<style lang="scss" scoped></style>
